<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/css/default.css" rel="stylesheet"/>
    <link href="/css/personal.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/css/balloon.min.css"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>
    <script src="/js/js.cookie.js"/>
    <script src="/js/layer/layer.js"/>
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            /* 指定标签信息的xml文件,全局变量 */
            /*<![CDATA[*/
            userid = /*[[${session.user.id}]]*/;
            /*]]>*/
        })
    </script>
    <script src="/js/ramer/personal.js"/>
    <title>个人中心</title>
</head>
<body>
<!--  返回-->
<div class="return_link">
    <img alt="error" src="/pictures/back.png" id="back"/>
</div>
<!--  返回主页-->
<div class="return_home">
    <img alt="error" src="/pictures/home.png" id="home"/>
</div>
<!-- 用户信息面板 -->
<div class="user_panel">
    <div class="head">
        <a id="showProfile">
            <img alt="error" th:src="${session.user.head}" class="user_head"
                 onerror="javascript:this.src='/pictures/userHead.jpg'"/>
            <br/>
            <span>更换头像</span>
        </a>
    </div>
    <div class="selfinfo">
        <div class="name" th:text="${session.user.username}"></div>
        <div class="contact">
            <span th:text="|QQ: ${user.qqNum != null ? user.qqNum :'无' }|"></span>
            <span th:text="|微博: ${user.weiboNum != null ? user.weiboNum : '无'}|"></span>
            <!-- 用户通知 -->
            <span>
                    <a href="javascript:void(0)" id="showPrivMess"
                       th:if="${session.user.notifies !=null or session.user.readedNotifies!=null}">
                        <i class="icon-envelope"></i>
                        <small class="notifyCount">
                            <sup th:text="${notifyCount}"></sup>
                        </small>
                    </a>
                    <a href="javascript:void(0)" id="showPrivMessNo"
                       th:if="${session.user.notifies == null and session.user.readedNotifies == null}">
                        <i class="icon-envelope-empty"></i>
                        <small class="notifyCount">
                            <sup th:text="${notifyCount}"></sup>
                        </small>
                    </a>
            </span>
        </div>
        <div class="info">
            <span>
                <a href="/logOff">注销</a>
            </span>
            <span>
                <a th:href="|/user/${session.user.id}|" id="editProfile">编辑个人信息</a>
            </span>
            <span>
                <a href="javascript:void(0);" id="saySomething">给我一个分享平台</a>
            </span>
            <span>
                <a id="showFollowPanel" href="#"> 我关注的<i class="icon-arrow-down"></i>
            </a>
            </span>
            <span>
                <a id="showFavouritePanel" href="#">我收藏的<i class="icon-arrow-down"></i></a>
            </span>
        </div>
    </div>
</div>

<!-- 私信面板 -->
<div class="privMessPanel" id="privMessPanel">
    <th:block th:each="notify:${user.notifies}">
      <span class="unreadNotify notify">
       <input type="hidden" th:value="${notify.id}" name="notifyId" class="notifyId"/>
       <input type="hidden" th:value="${notify.notifiedUser.id}" name="notifiedUserId" class="notifiedUserId"/>
       <a th:href="|/user/personal/${notify.user.id}|" class="notifyUser"
          th:text="|${notify.user.username} :${notify.content}|"></a>
        <sub th:text="${#calendars.format(notify.date,'HH:mm:ss yyyy-MM-dd')}"></sub>
        <img alt="error" src="/pictures/new.png" class="newNotify"/>
      </span>
    </th:block>
    <th:block th:each="readedNotify:${user.readedNotifies}">
        <span class="notify">
            <input type="hidden" th:value="${readedNotify.id}" name="notifyId" class="notifyId"/>
            <input type="hidden" th:value="${readedNotify.notifiedUser.id}" name="notifiedUserId"
                   class="notifiedUserId"/>
            <a th:href="|/user/personal/${readedNotify.user.id}|" class="readPrivMess"
               th:text="|${readedNotify.user.username } : ${readedNotify.content}|">
                <sub th:text="${#calendars.format(readedNotify.date,'HH:mm:ss yyyy-MM-dd')}"></sub>
            </a>
        </span>
    </th:block>
</div>

<!-- 更新用户头像面板 -->
<div class="update_head_panel">
    <form
            th:action="|/user/update?id=${user.id}|"
            method="post" enctype="multipart/form-data">
        <input class="upbtn2" placeholder="选择你的头像" id="picName2"/>
        <input type="file" name="picture" class="upbtn" accept="image/*" id="upPic2"/>
        <div id="preview2" class="preview"></div>
        <input type="submit" value="更新头像"/>
        <input type="reset" value="收起" class="hiddenUpdateHeadPanel"/>
    </form>
</div>

<!-- 关注面板 -->
<div class="follow_panel clearfix" id="followPanel">
    <span th:if="${#lists.isEmpty(user.follows)}">什么都没有诶 !</span>
    <th:block th:each="follow:${user.follows}" th:if="not ${#lists.isEmpty(user.follows)}">
        <div class="followed_user_panel">
            <div>
                <a th:href="|/user/personal/${follow.followedUser.id}|">
                    <img class="followed_user_head" alt="error"
                         th:src="|/${follow.followedUser.head}|"
                         onerror="javascript:this.src='/pictures/userHead.jpg'"/>
                </a>
            </div>
            <div class="followed_user_name_panel">
                <a th:href="|/user/personal/${follow.followedUser.id}|" th:text="${follow.followedUser.username}"></a>
            </div>
        </div>
    </th:block>
</div>

<!-- 收藏面板 -->
<div class="favourite_panel" id="favouritePanel">
    <span th:if="${#lists.isEmpty(user.favourites)}">什么都没有诶 !</span>
    <th:block th:each="favourite:${user.favourites}" th:if="not ${#lists.isEmpty(user.favourites)}">
        <div class="favourite_item_panel">
            <div>
                <a th:href="|/user/topic/${favourite.topic.id}|">
                    <img class="favourite_item_picture" alt="error"
                         th:src="|/${favourite.topic.picture}|"/>
                </a>
            </div>
            <div class="favourite_item_content">
                <a th:href="|/user/topic/${favourite.topic.id}|" th:text="${favourite.topic.content}"></a>
            </div>
        </div>
    </th:block>
</div>

<!-- 发表分享面板 -->
<div id="topic_panel" class="topic_panel">
    <form action="/publish"
          method="post" enctype="multipart/form-data">
        <input type="hidden" name="personal" value="true"/>
        <textarea rows="7" cols="30" class="topic_content" name="content"></textarea>
        <div class="tool">
            <div id="addPosition" class="add_position" data-balloon="添加当前位置" data-balloon-pos="right">
                <img alt="" src="/pictures/position.png"/>
            </div>
            <div id="addTime" class="add_time" data-balloon="添加当前时间" data-balloon-pos="right">
                <img alt="" src="/pictures/calendar.png"/>
            </div>
        </div>
        <input class="choose_pic" type="text" placeholder="请选择一张图片" id="picName"/>
        <input type="file" name="picture" class="choose_file" accept="image/*" id="upPic"/>
        <div id="preview" class="preview"></div>
        <div class="input_tag_panel">
            <span>标签：</span>
            <select id="tags">
                <option value="no" id="optionTag">请选择</option>
            </select>
            <input type="text" name="tags" class="input_tags" placeholder="标签使用;隔开"/>
        </div>
        <input type="submit" value="分享"/>
        <input type="reset" value="收起" class="hiddenTopic"/>
    </form>
</div>

<!-- 显示个人分享 -->
<div class="no_topic" th:if="${#lists.isEmpty(topicsPage.content)}">
    <strong>你还没有发布分享,现在开始记录你的生活吧 !</strong>
</div>
<th:block th:each="topic:${topicsPage.content}" th:if="not ${#lists.isEmpty(topicsPage.content)}">
    <div class="show_topic">
        <div class="side">
            <div class="day">
                <a href="#" th:text="|${topic.date.date}/${topic.date.month+1}|"></a>
            </div>
        </div>
        <div class="main">
            <div class="content">
                <th:block th:if="not ${#lists.isEmpty(topic.albums)}">
                    <div class="topic-picture">
                        <th:block th:each="album,aStat:${topic.albums}">
                            <th:block th:if="${aStat.even eq true}">
                                <th:block th:if="${aStat.count ne aStat.size}">
                                    <div th:if="${aStat.even eq true}" class="skew_left_container">
                                        <img th:src="${album.url}" alt="error" class="skew_left_content"/>
                                    </div>
                                    <div th:if="${aStat.odd eq true}" class="skew_right_container">
                                        <img th:src="${album.url}" alt="error" class="skew_right_content"/>
                                    </div>
                                </th:block>
                                <th:block th:if="${aStat.count eq aStat.size}">
                                    <div>
                                        <img th:src="${album.url}" alt="error" class=""/>
                                    </div>
                                </th:block>
                            </th:block>
                            <th:block th:if="${aStat.odd eq true}">
                                <div th:if="${aStat.even eq true}" class="skew_left_container">
                                    <img th:src="${album.url}" alt="error" class="skew_left_content"/>
                                </div>
                                <div th:if="${aStat.odd eq true}" class="skew_right_container">
                                    <img th:src="${album.url}" alt="error" class="skew_right_content"/>
                                </div>
                            </th:block>
                        </th:block>
                    </div>
                    <p class="desc"></p>
                </th:block>
                <th:block th:if="${#lists.isEmpty(topic.albums)}">
                    <p class="desc" style="height: 35px;"></p>
                </th:block>
                <div class="text" th:text="${topic.content}"></div>
                <!-- 标签面板 -->
                <div class="tags_panel">
                    <th:block th:each="tag:${topic.tagses}">
                        <i class="icon-tags"></i>
                        <span class="tags" th:text="${tag}"></span>
                    </th:block>
                </div>
                <!-- 通过标签获取分享表单 -->
                <form action="/home/tag" id="tagForm">
                    <input type="text" name="tag" id="tagName"/>
                </form>
            </div>
        </div>
        <hr class="h_line"/>
        <th:block th:with="isPraise=false"></th:block>
        <th:block th:each="p:${praises }">
            <th:block th:if="${topic.id == p }" th:with="isPraise=true"></th:block>
        </th:block>
        <a th:href="|/user/topic/notPraise/${topic.id}|" class="thumbsup" th:if="${ isPraise == true}">
            <i class="icon-thumbs-up-ramer"></i>
        </a>
        <a th:href="|/user/topic/praise/${topic.id}|" class="thumbsup" th:if="${ isPraise != true}">
            <i class="icon-thumbs-up"></i>
        </a>
        <small class="upCounts" th:text="|(${topic.upCounts == null ? 0 : topic.upCounts})|"></small>
        <a th:href="|/user/topic/comment/${topic.id}|" class="comment">
            <i class="icon-edit"></i>
        </a>
        <a th:href="|/user/topic/deleteTopic/${topic.id}|" class="trash">
            <i class="icon-trash"></i>
        </a>
        <!-- 发表评论表单 -->
        <div class="comment_form_panel">
            <form action="" method="post" class="comment_form">
                <textarea rows="7" cols="30" class="comment_content" name="content"></textarea>
                <br/>
                <input type="submit" value="发表评论"/>
                <input type="reset" value="收起" class="hiddenCommentForm"/>
            </form>
        </div>
        <!-- 删除用户评论表单 -->
        <form action="" method="post" class="delete_comment_form">
            <input type="hidden" name="topic" th:value="${topic.id}"/>
        </form>

        <!-- 显示评论 -->
        <th:block th:each="comment:${topic.comments}">
            <div class="comment_panel">
                <p>
                    <span th:text="|${comment.user.username } : ${comment.content }|"></span>
                    <sub th:text="|  ${#calendars.format(comment.date,'HH:mm:ss yyyy-MM-dd')}|"></sub>
                    <a th:href="|/user/topic/comment/reply/${comment.id}|" class="reply">
                        <i class="icon-edit"></i>
                    </a>
                    <a th:href="|/user/topic/comment/delete/${comment.id}|" class="trash2">
                        <i class="icon-trash"></i>
                    </a>
                </p>
                <!-- 回复评论表单 -->
                <div class="reply_form_panel">
                    <form action="" method="post" class="reply_form">
                        <textarea rows="7" cols="30" class="reply_content" name="content"></textarea>
                        <br/>
                        <input type="submit" value="回复评论"/>
                        <input type="reset" value="收起" class="hiddenReplyForm"/>
                    </form>
                </div>
                <th:block th:each="reply:${comment.replies}">
                    <p>
                        <span th:text="|${reply.user.username}&nbsp;回复&nbsp;${comment.user.username} : ${reply.content }|"></span>
                        <sub th:text="|  ${#calendars.format(reply.date,'HH:mm:ss yyyy-MM-dd')}|"></sub>
                        <a th:href="|/user/topic/comment/reply/${reply.comment.id}|" class="reply2">
                            <i class="icon-edit"></i>
                        </a>
                        <a th:href="|/user/topic/reply/delete/${reply.id}|" class="trash_reply">
                            <i class="icon-trash"></i>
                        </a>
                    </p>
                    <!-- 回复回复表单 -->
                    <div class="reply_double_form_panel">
                        <form action="" method="post" class="reply_double_form">
                            <textarea rows="7" cols="30" class="reply_double_content" name="content"></textarea>
                            <input type="submit" value="回复"/>
                            <input type="reset" value="收起" class="hiddenReplyDoubleForm"/>
                        </form>
                    </div>
                </th:block>
            </div>
        </th:block>
    </div>
</th:block>

<!-- 存储记录的总页数 -->
<input id="totalPages" type="hidden" th:value="${topicsPage.totalPages }"/>
<!-- 存储当前页号 -->
<input id="number" type="hidden" th:value="${topicsPage.number}"/>
<!-- 分页 -->
<!--<ul class="page_panel">-->
    <!--<li class="lastPage">-->
        <!--<a th:href="|?pageNum=${topicsPage.number + 1 - 1}|" id="lastPage">-->
            <!--<img alt="error" src="/pictures/previous.png"/>-->
        <!--</a>-->
    <!--</li>-->
    <!--<li class="nextPage">-->
        <!--<a th:href="|?pageNum=${topicsPage.number + 1 + 1}|" id="nextPage">-->
            <!--<img alt="error" src="/pictures/next.png"/>-->
        <!--</a>-->
    <!--</li>-->
<!--</ul>-->

<input type="hidden" id="positionVal"/>
</body>
</html>